<template>
    <h1>Demo1</h1>
    <div class="container" ref="ContainerRef" :style="{ width: CanvasWidth + 'px', height: CanvasHeight + 'px' }"></div>
</template>

<style scoped>
.container {
    background-color: aquamarine;
}
</style>

<script setup lang="ts" name="demo1">
import { onMounted, ref } from 'vue';
import { scene, renderer, resize } from '../libs/scene'
import * as THREE from 'three';
/**
 * 初始化
 */
const CanvasWidth = 800;
const CanvasHeight = 600;
const ContainerRef = ref();
resize(CanvasWidth, CanvasHeight);

/**
 * 业务开始
 */

const geometry = new THREE.BoxGeometry(100, 100, 100);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

const axesHelper = new THREE.AxesHelper(350);
scene.add(axesHelper);

// const geometry = new THREE.BufferGeometry(); //创建一个几何体对象
// const R = 100; //圆弧半径
// const N = 50; //分段数量
// const sp = 2 * Math.PI / N;//两个相邻点间隔弧度
// // 批量生成圆弧上的顶点数据
// const arr = [];
// for (let i = 0; i < N; i++) {
//     const angle = sp * i;//当前点弧度
//     // 以坐标原点为中心，在XOY平面上生成圆弧上的顶点数据
//     const x = R * Math.cos(angle);
//     const y = R * Math.sin(angle);
//     arr.push(x, y, 0);
// }
// //类型数组创建顶点数据
// const vertices = new Float32Array(arr);
// // 创建属性缓冲区对象
// //3个为一组，表示一个顶点的xyz坐标
// const attribue = new THREE.BufferAttribute(vertices, 3);
// // 设置几何体attributes属性的位置属性
// geometry.attributes.position = attribue;

// // 线材质
// const material = new THREE.LineBasicMaterial({
//     color: 0xff0000 //线条颜色
// });
// // 创建线模型对象   构造函数：Line、LineLoop、LineSegments
// // const line = new THREE.Line(geometry, material); 
// const line = new THREE.LineLoop(geometry, material);//线条模型对象
// scene.add(line)

// let pointsArr = [
//     // 三维向量Vector2表示的坐标值
//     new THREE.Vector2(0,0),
//     new THREE.Vector2(100,0),
//     new THREE.Vector2(100,100),
//     new THREE.Vector2(0,100),
// ];

// const arc = new THREE.EllipseCurve(0, 0, 100, 50, 0, Math.PI * 3/2);
// pointsArr = arc.getSpacedPoints(50)
// console.log('pointsArr', pointsArr)

// geometry.setFromPoints(pointsArr);

onMounted(() => {
    ContainerRef.value.appendChild(renderer.domElement);
})

</script>